<template>
  <div class="login">
    <div class="picture">
      <img src="../../assets/login/logo.png" alt="">
      <img src="../../assets/login/figure.png" alt="">
      <span class="title">让健康惠及每一个人</span>
      <span>提升工作效率，提升服务质量</span>
    </div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
             label-position="left">

      <div class="title-container">
        <h3 class="title">欢迎登录HMH VR</h3>
      </div>

      <el-form-item prop="email" class="email">
        <img src="../../assets/login/email.svg" alt="">
        <el-input
          ref="email"
          v-model="loginForm.email"
          placeholder="邮箱"
          name="email"
          type="text"
          tabindex="1"
          auto-complete="off"
        />
      </el-form-item>

      <el-form-item prop="password" class="password">
        <img src="../../assets/login/password.svg" alt="">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="密码"
          tabindex="2"
          auto-complete="off"
          maxlength="20"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd" style="position:absolute;right:3px;top:4px;">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
        </span>
      </el-form-item>

      <div class="block">
        <el-slider 
          v-model="slider" 
          :show-tooltip="false"
          :step="1"
          :max="100"
          :format-tooltip="formatTooltip"
        ></el-slider>
        <span class="sliding_text">请按住滑块，推动到最右侧</span>
      </div>

      <el-checkbox v-model="checked">记住密码</el-checkbox>

      <!-- <div class="login_type"> -->
        <!-- <div>
          <span>登录方式：</span>
          <span>{{options[1].label}}</span>
        </div> -->
        <!-- <el-select v-model="login_type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.login_type"
            :label="item.label"
            :value="item.login_type">
          </el-option>
        </el-select> -->

        <!-- <el-switch
          v-model="loginForm.agent_status"
          active-color="#4DB690"
          inactive-color="#c1c1c1"
          :active-text="active_text"
          @change="changeSwitchText"
          ref="switch_type">
        </el-switch> -->

      <!-- </div> -->

      <el-button
        :loading="loading"
        type="primary"
        @click.native.prevent="handleLogin"
        @keyup="handleLogin"
      >登录
      </el-button>
      </el-form>
  </div>
</template>

<script>
  import {validEmail, validPassword} from '@/utils/validate';
  import {statusCode} from '@/utils/index.js';
  import Cookies from 'js-cookie';

  export default {
    data() {
      //验证邮箱
      const validateEmail = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入邮箱'));
        } else if (!validEmail(value)) {
          callback(new Error('请输入正确的邮箱'));
        } else {
          callback();
        }
      }
      //验证密码
      const validatePassword = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入密码'));
        } else if (!validPassword(value)) {
          callback(new Error('密码输入有误，请输入大小写字母+数字'));
        } else if (value.length < 12 || value.length > 20) {
          callback(new Error('请输入12位到20位密码'));
        } else {
          callback();
        }
      }
      return {
        loginForm: {
          email: '',
          password: '',
          supplierType: 1,
          agent_status: true,
        },
        loginRules: {
          email: [{required: true, trigger: 'blur', validator: validateEmail}],
          password: [{required: true, trigger: 'blur', validator: validatePassword}]
        },
        loading: false,
        passwordType: 'password',
        checked: false,
        slider: 0,
        active_text: '空闲',
        options: [{
          login_type: 'Local',
          label: '手机登录'
        }, {
          login_type: 'sip',
          label: '软电话'
        }],
        login_type: 'sip'
      }
    },
    watch: {
      //登录滑块回弹
      slider() {
        if (this.slider <= 50) {
          this.slider = 0
        } else if (this.slider > 50) {
          this.slider = 100
        }
      }
    },
    created() {
      this.checked = JSON.parse(Cookies.get('user_checked'));
      if (JSON.parse(Cookies.get('user_checked'))) {
        this.loginForm.email = this.EncryUtil.decryptByAES(Cookies.get('email'));
        this.loginForm.password = this.EncryUtil.decryptByAES(Cookies.get('password'));
      } else {
        this.loginForm.email = '';
        this.loginForm.password = '';
      }
    },
    methods: {
      //显示隐藏密码
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = '';
        } else {
          this.passwordType = 'password';
        }
      },
      //登录
      handleLogin() {
        let that = this;
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            setTimeout(() => {
              that.loading = false;
            }, 5000);
            if (!this.login_type) {
              this.$message.error('请选择登录方式');
              this.loading = false;
            } else {
              if (this.slider != 100) {
                this.$message.error('请推动滑块到最右侧！');
                this.loading = false;
              } else {
                this.$store.dispatch('user/login', this.loginForm).then((res) => {
                  if (res.code === statusCode.success) {
                    let {repId, agentNo, agentPassword} = res.data;
                    let moorInfo = {
                      repId: repId,
                      loginName: agentNo,
                      password: encodeURIComponent(agentPassword),
                      loginType: this.login_type,
                      agentStatus: this.loginForm.agent_status === true ? '1' : '0'  //1->空闲 0-忙碌
                    };
                    Cookies.set('user_info', this.EncryUtil.encryptByAES(JSON.stringify(res.data)), {expires: 24 * 60 * 60 * 1000})
                    Cookies.set('moorInfo', this.EncryUtil.encryptByAES(JSON.stringify(moorInfo)), {expires: 24 * 60 * 60 * 1000});

                    Cookies.set('kicking', false);
                    //记住密码
                    Cookies.set('user_checked', this.checked, {expires: 7});
                    Cookies.set('email', this.EncryUtil.encryptByAES(this.loginForm.email), {expires: 7});
                    Cookies.set('password', this.EncryUtil.encryptByAES(this.loginForm.password), {expires: 7});
                    if (res.data.type == '1') {
                      this.$router.push('/my_customer');
                    }
                    if (res.data.type == '2') {
                      this.$router.push('/weixinCustomer');
                    }
                  }
                  this.loading = false;
                }).catch(() => {
                  this.loading = false;
                })
              }
            }
          } else {
            console.log('邮箱或密码不正确');
            return false;
          }
        })
      },
      //修改开关文字以及颜色
      changeSwitchText() {
        if (this.loginForm.agent_status === true) {
          this.active_text = '空闲';
          this.$refs.switch_type.$el.lastChild.style.color = "#4DB690";
        } else {
          this.active_text = '忙碌';
          this.$refs.switch_type.$el.lastChild.style.color = "rgb(255, 122, 144)";
        }
      },
      formatTooltip(val) {
        if(document.getElementsByClassName('sliding_text')[0]){
          if(val>=23){
            document.getElementsByClassName('sliding_text')[0].style.color="#fff";
          }else if(val < 23){
            document.getElementsByClassName('sliding_text')[0].style.color="#C0C4CC";
          }
        }
      }
    }
  }
</script>

<style lang="less">
  .login{
    height:500px;
    position: absolute;
    top: 50%; /*偏移*/
    transform: translateY(-50%);
    display:flex;
    left: 50%;
    transform: translate(-50%,-50%);
    .picture{
      width:460px;
      height:100%;
      position:relative;
      img:first-child{
        position:absolute;
        top:40px;
        left:32px;
      }
      img:last-child{
        width:100%;
        height:100%;
      }
      span{
        position:absolute;
      }
      .title{
        top:112px;
        left:39px;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
      span:last-child{
        top:176px;
        left:42px;
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
    .el-form {
      width: 460px;
      height: 100%;
      background-color: #FFFFFF;
      border-radius: 0px 8px 8px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding:60px 85px;
      box-sizing:border-box;

      .title-container {
        .title {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          text-align: center;
          margin-bottom: 59px;
          margin-top:0;
        }
      }

      .el-form-item {
        width:290px;
        height:27px;
        margin-bottom:40px;
        .el-form-item__content {
          width:100%;
          height:100%;
          line-height:0;
          position: relative;
          img{
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            margin-left:4px;
          }

          .el-input {
            width:100%;
            height:100%;
            .el-input__inner {
              width:100%;
              height:100%;
              border: none;
              border-bottom: 1px solid #EEF0F3;;
              border-radius:0;
              padding:0 0 10px 36px;
              display:flex;
              box-sizing:border-box;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.8);
            }

            .el-input__inner::placeholder {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #C0C4CC;
              margin-top:-10px;
            }
          }

          .el-form-item__error {
            margin-left: 3px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #F65C44;
          }
        }
      }

      .password{
        margin-bottom:32px;
      }

      .login_type {
        width: 319px;
        display: flex;
        justify-content: space-between;
        // margin-left:57px;
        margin-top: 35px;
        font-size: 14px;

        .el-select {
          width: 33%;
          margin-top: -7px;
          margin-left: -73px;

          .el-input {
            .el-input__inner {
              height: 28px;
            }

            .el-input__suffix {
              .el-input__icon {
                line-height: 28px
              }
            }
          }
        }

        .el-switch {
          margin-left: -3px;
        }
      }

      .block {
        width: 290px;
        height: 40px;
        background-color: rgba(240, 242, 245, 0.5);
        border-radius: 2px;
        position: relative;
        margin-bottom:9px;

        .el-slider {
          width:250px;
          height:100%;
          
          .el-slider__runway {
            height:100%;
            background-color: transparent;
            margin:0;
            position:relative;
            
            .el-slider__bar {
              height: 40px;
              background-color: #2A82E2;
              border-radius: 2px 0px 0px 2px;
            }
            .el-slider__button-wrapper{
              width: 40px;
              height:100%;
              position:absolute;
              .el-tooltip {
                width:100%;
                height: 100%;
                border: none;
                background-color: #2A82E2;
                background-image:url('../../assets/login/double_arrow.svg');
                background-repeat:no-repeat;
                background-position:center center;
                border-radius: 0 2px 2px 0;
                transform: translate(20px, 15px);
              }
            }
          }
        }

        .sliding_text {
          position: absolute;
          top: 10px;
          left: 56px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #C0C4CC;
          line-height: 20px;
        }
      }

      .el-checkbox {
        width: 290px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7085A1;
        line-height: 17px;
        display: block;

        .el-checkbox__input {
          top: -1px;
          .el-checkbox__inner:hover{
            border-color:#DDDFE6;
          }
        }

        .el-checkbox__label{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #C0C4CC;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
          background-color: #2A82E2;
          border-color:#2A82E2;
        }
      }

      .el-button {
        width: 290px;
        height: 40px;
        background-color: #2A82E2;
        border-radius: 2px;
        margin-top: 50px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        border: none;
      }
    }
  }
  #app{
    height:100%;
  }
</style>
